<template>
	<view class="wrapper">
		<view class="user-bg">
			<image src="../../static/images/news-bg.png" mode="widthFix" class="user-img"></image>
		</view>
		<custom-nav-bar :opacityVal="opacityVal" :titleName="'排行榜单'" :titleColor="'#000'"></custom-nav-bar>
		<view :style="{height: `${customBar}px`}"></view>
		<view class="main-content" :style="{ height: `calc(100vh - ${customBar}px)`}">
			<view class="info-box">
				<view class="top-handle">
					<view class="type-filtering">
						<view class="type-box" v-for="(item, index) in typeList" :key="index">
							<view class="type-btn" :class="{'typeActive': item.isSelect}" @click="switchSelection(item, index)">
							    {{item.label}} 
							</view>
							<view class="underline" :class="{'lineActive': item.isSelect}" ></view>
						</view>
					</view>
					<view class="time-switch">
						<view class="switch-bar" @click="timeToogleBar()">
							<view class="label">{{timeScreenListStr}}</view>
							<image src="../../static/images/data-black-down.png" mode="aspectFit" class="down"
							:class="{'switch-down-rotate': showTimeSwitch, 'switch-down-rotate-reverse': !showTimeSwitch}">
							</image>
						</view>
						<view class="time-menu" v-if="showTimeSwitch" :class="{'time-menu-down': showTimeSwitch}">
							<view class="item" v-for="(item, index) in timeScreenList" :key="index" @click="timeSwitchBarSelected(item)">
								{{item.label}}
							</view>
						</view>
					</view>
				</view>
				<view class="choose-box">
					<custom-drop-down :screenList="clubScreenList" v-if="selectIndex == 0"/>
					<custom-drop-down :screenList="cityScreenList" v-if="selectIndex == 1"/>
					<view class="search-box" v-if="selectIndex == 2">
						<input type="text" placeholder="搜索城市、俱乐部" class="search-input" v-model="searchVal"/>
						<image src="../../static/images/score-search.png" mode="aspectFit" class="search-img"></image>
					</view>
				</view>
				<view class="score-type-filtering">
					<view class="type-box" v-for="(item, index) in scoreTypeList" :key="index">
						<view class="type-btn" :class="{typeActive: item.isSelect}" @click="switchScoreTypeSelection(item)">
							{{item.label}}
						</view>
						<view class="underline" :class="{'lineActive': item.isSelect}" ></view>
					</view>
				</view>
				<view class="podium-box">
					<view class="podium-info">
						<view class="podium-2 podium">
							<view class="podium-item">
								<image src="../../static/images/score-silver-crown.png" mode="aspectFit" class="crown-img"></image>
								<view class="avatar-box">
									<image src="../../static/images/data-left-player.png" mode="aspectFit" class="avatar-img"></image>
								</view>
								<view class="player-name">丁俊晖</view>
								<view class="player-lv">
									<text>Lv 111</text>
								</view>
							</view>
						</view>
						<view class="podium-1 podium">
							<view class="podium-item">
								<image src="../../static/images/score-gold-crown.png" mode="aspectFit" class="crown-img"></image>
								<view class="avatar-box">
									<image src="../../static/images/data-left-player.png" mode="aspectFit" class="avatar-img"></image>
								</view>
								<view class="player-name">丁俊晖</view>
								<view class="player-lv">
									<text>Lv 100</text>
								</view>
							</view>
						</view>
						<view class="podium-3 podium">
							<view class="podium-item">
								<image src="../../static/images/score-copper-crown.png" mode="aspectFit" class="crown-img"></image>
								<view class="avatar-box">
									<image src="../../static/images/data-left-player.png" mode="aspectFit" class="avatar-img"></image>
								</view>
								<view class="player-name">丁俊晖</view>
								<view class="player-lv">
									<text>Lv 91</text>
								</view>
							</view>
						</view>
					</view>
					<image src="../../static/images/score-podium.png" mode="scaleToFill" class="podium-img"></image>
				</view>
			</view>
			<scroll-view scroll-y="true" class="ranking-box" :style="{'height': scrollViewHeight}">
				<view class="markers-box" @click="popupToogle">
					<view class="markers"></view>
				</view>
				<view class="top-8">前8名</view>
				<view class="ranking-list">
					<view class="ranking-item" v-for="(item, index) in 28" :key="index">
						<view class="left-info">
							<view class="index">1</view>
							<image src="../../static/images/data-left-player.png" mode="aspectFit" class="avatar"></image>
							<view class="player-name">特鲁姆普</view>
							<view class="player-lv">
								<text>Lv 91</text>
							</view>
						</view>
						<view class="right-handle">
							<view class="grips">
								<text>交过手</text>
							</view>
							<view class="like-btn-box">
								<view class="like-btn" @click="giveLike(item)">
									<image src="../../static/images/news-unliked.png" mode="aspectFill" class="like-img" v-if="!item.liked"></image>
									<image src="../../static/images/news-liked.png" mode="aspectFill" class="like-img" v-else></image>
								</view>
								<text>90</text>
							</view>
						</view>
						
					</view>
				</view>
				<view class="top-16">前16名</view>
			</scroll-view>
		</view>
		
		<!-- <cover-view class="bike-detail-box" v-if="isBikeDetailsShow" @click="closePopup()">
			<cover-view class="bike-detail" :class="{'detailTransform': isBikeDetailsShow}">
				<cover-view class="bike-title">
					<cover-view class="title-left">
						<cover-view class="bg"></cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
		</cover-view> -->
	</view>
</template>

<script>
	import customNavBar from "@/components/custom-nav-bar.vue";
	import customDropDown from "@/components/custom-drop-down.vue";
	
	export default {
		data() {
			const customBar	= uni.getStorageSync('CustomBar');
			const timeScreenList = [{
				label: '本周榜',
				value: 1,
			},{
				label: '近一个月榜',
				value: 2,
			},{
				label: '总榜',
				value: 3,
			}];
			return {
				startY: 0, // 起始Y坐标
				endY: 0,   // 结束Y坐标
				scrollDirection: null, // 滑动方向
				scrollViewHeight: `calc(100% - 470rpx - 66rpx - 108rpx - 110rpx)`,
				//scrollViewHeight: `calc(100% - 260px - 33px - 54px - 55px)`,
				popupHeightChanges: false,
				customBar,
				opacityVal: 'transparent',
				isBikeDetailsShow: false,
				showTimeSwitch: false,
				selectIndex: 0,
				timeScreenList,
				timeScreenListStr: timeScreenList[0].label,
				searchVal: '',
				typeList: [{
					label: '俱乐部',
					type: 1,
					isSelect: true,
				},{
					label: '城市',
					type: 2,
					isSelect: false,
				},{
					label: '全国',
					type: 3,
					isSelect: false,
				}],
				scoreTypeList: [{
					label: '评级',
					type: 1,
					isSelect: true,
				},{
					label: '胜率',
					type: 2,
					isSelect: false,
				},{
					label: '接清',
					type: 3,
					isSelect: false,
				},{
					label: '炸清',
					type: 4,
					isSelect: false,
				},{
					label: '大金',
					type: 5,
					isSelect: false,
				},{
					label: '小金',
					type: 6,
					isSelect: false,
				},{
					label: '黄金9',
					type: 7,
					isSelect: false,
				}],
				clubScreenList: [{
					label: '（北京）中式台球俱乐部（北京）中式台球俱乐部（北京）中式台球俱乐部',
					value: 1,
				},{
					label: '（上海）中式台球俱乐部',
					value: 2,
				},{
					label: '（北京）中式台球俱乐部（北京）中式台球俱乐部（北京）中式台球俱乐部',
					value: 1,
				},{
					label: '（上海）中式台球俱乐部',
					value: 2,
				},{
					label: '（北京）中式台球俱乐部（北京）中式台球俱乐部（北京）中式台球俱乐部',
					value: 1,
				},{
					label: '（上海）中式台球俱乐部',
					value: 2,
				}],
				cityScreenList: [{
					label: '北京市',
					value: 1,
				},{
					label: '天津市',
					value: 2,
				},{
					label: '上海市',
					value: 3,
				},{
					label: '长沙市',
					value: 4,
				},{
					label: '重庆市',
					value: 5,
				},{
					label: '香港特别行政区',
					value: 6,
				}],
			}
		},
		components: {
			customNavBar,
			customDropDown,
		},
		watch: {
			popupHeightChanges(newVal, oldVal) {
				if(newVal) { //true
				    this.scrollViewHeight = `calc(100% - 80rpx - 108rpx - 110rpx)`;
					//this.scrollViewHeight = `calc(100% - 40px - 54px - 55px)`;
				} else { //false 
				    this.scrollViewHeight = `calc(100% - 470rpx - 66rpx - 108rpx - 110rpx)`;
					//this.scrollViewHeight = `calc(100% - 260px - 33px - 54px - 55px)`;
				}
			},
			isBikeDetailsShow(newVal, oldVal) {
				if(newVal) {
					uni.hideTabBar();
				} 
				if(!newVal) {
					uni.showTabBar();
				}
			},
		},
		onLoad() {
			uni.$on('closeScoreDropDown', () => {
				this.showTimeSwitch = false;
			})
		},
		onShow() {
			
		},
		methods: {
			popupToogle() {
				this.popupHeightChanges = !this.popupHeightChanges;
			},
			touchstart(e) {
			    this.startY = e.touches[0].clientY;
			},
			touchmove(e) {
			    // 此处可以添加滑动过程中的处理逻辑，如动态更新内容等
			},
			touchend(e) {
			    this.endY = e.changedTouches[0].clientY;
			    const direction = this.endY - this.startY;
			    if (direction > 0) {
				    this.scrollDirection = 'down'; // 向下滑动
			    } else if (direction < 0) {
				    this.scrollDirection = 'up'; // 向上滑动
			    }
			    console.log(`滑动方向: ${this.scrollDirection}`);
			    // 根据滑动方向执行相应操作，如加载更多数据等
			},
			giveLike(item) {
				item.liked = !item.liked;
			},
			timeSwitchBarSelected(item) {
				this.timeScreenListStr = item.label;
				this.showTimeSwitch = false;
			},
			timeToogleBar() {
				this.showTimeSwitch = !this.showTimeSwitch;
				uni.$emit('closeDropDown');
			},
			switchSelection(item, index){
				this.selectIndex = index;
				this.typeList.forEach((item, index) => {
					item.isSelect = false;
				});
				item.isSelect = true;
			},
			switchScoreTypeSelection(item) {
				this.scoreTypeList.forEach((item, index) => {
					item.isSelect = false;
				});
				item.isSelect = true;
			},
			openPopup() {
				this.isBikeDetailsShow = true;
			},
			closePopup() {
				this.isBikeDetailsShow = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrapper{
		position: relative;
		background: #F1F2F6;
		@mixin font-style {
			background: $gradient-color;
			-webkit-background-clip: text;
			color: transparent;
			font-weight: bold;
		}
		.user-bg{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			.user-img{
				width: 100%;
			}
		}
		.main-content{
			width: 100%;
			box-sizing: border-box;
			padding: 0 10upx;
			position: relative;
			overflow: hidden;
			.info-box{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				//height: calc(270px + 33px + 54px + 55px);
				height: calc(470rpx + 66rpx + 108rpx + 110rpx);
				.top-handle{ //顶部导航高度
					display: flex;
					justify-content: space-between;
					align-items: center;
					// height: 55px;
					height: 110rpx;
					.type-filtering{
						display: flex;
						align-items: center;
						.type-box{
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							.type-btn{
								margin: 0 20upx;
								color: $gray-color;
								font-size: 38upx;
								margin-bottom: 8upx;
							}
							.typeActive{
								@include font-style();
								font-size: 40upx;
							}
							.underline{
								height: 6upx;
								border-radius: 4upx;
								width: 70upx;
								background: transparent;
							}
							.lineActive{
								background: $main-color;
							}
						}
					}
					.time-switch{
						width: auto;
						background: rgba(255, 255, 255, 0.6);
						position: relative;
						top: -10upx;
						border-radius: 16upx;
						margin-right: 20upx;
						.switch-bar{
							width: 100%;
							display: flex;
							height: 66upx;
							align-items: center;
							padding: 0 16upx;
							overflow: hidden;
							.label{
								width: calc(100% - 52px);
								margin: 0 16upx;
								color: $gray-color;
								font-size: 26upx;
								white-space: nowrap;       
							    overflow: hidden;    
							    text-overflow: ellipsis; 
							}
							.down{
								width: 40upx;
								height: 40upx;
							}
							.switch-down-rotate{
								transform: rotate(180deg); /* 将图片旋转180度 */
								transition: transform 0.5s ease;
							}
							.switch-down-rotate-reverse{
								transform: rotate(0deg);
								transition: transform 0.5s ease; /* 添加过渡动画效果，持续0.5秒，缓和动画效果 */
							}
						}
						.time-menu{
							width: calc(100% - 12px);
							color: $gray-color;
							display: flex;
							flex-direction: column;
							background: #fff;
							border-radius: 20upx;
							position: absolute;
							top: 76upx;
							left: 0;
							z-index: 9;
							padding: 0 14upx;
							box-shadow: 0px 0px 10upx 6upx rgba(0, 0, 0, 0.1);
							max-height: 300upx;
							overflow-y: scroll;
							.item{
								font-size: 26upx;
								padding: 14upx 0;
							}
						}
						.time-menu-down{
							animation: timemenumove 0.2s ease 0s 1 normal;
						}
						@keyframes timemenumove {
							0% {height: 0;}
							50% {height: 50upx;}
							100% {height: 120upx;}
						}
					}
				}
				.choose-box{
					width: 100%;
					height: 108rpx;
					box-sizing: border-box;
					padding: 10upx 20upx 0;
					.search-box{
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;
						background: rgba(255, 255, 255, 0.6);
						border-radius: 16upx;
						height: 66upx;
						padding: 0 16upx;
						box-sizing: border-box;
						.search-input{
							flex: 1;
							font-size: 26upx;
							margin: 0 16upx;
							color: $gray-color;
						}
						.search-img{
							width: 46upx;
							height: 46upx;
						}
					}
				}
				.score-type-filtering{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 66rpx;
					box-sizing: border-box;
					padding: 10upx 20upx 0;
					.type-box{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						.type-btn{
							color: $gray-color;
							font-size: 32upx;
							margin-bottom: 8upx;
						}
						.typeActive{
							@include font-style();
						}
						.underline{
							height: 4upx;
							border-radius: 2upx;
							width: 50upx;
							background: transparent;
						}
						.lineActive{
							background: $main-color;
						}
					}
				}
				.podium-box{
					width: 100%;
					height: 470rpx;
					padding: 0 40upx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					// align-items: flex-end;
					.podium-info{
						width: 100%;
						display: flex;
						align-items: flex-end;
						.podium{
							flex: 1;
							.podium-item{
								width: 100%;
								height: 300rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
								.crown-img{
									width: 62upx;
									height: 62upx;
									position: relative;
									left: -36upx;
									top: 14upx;
								}
								.avatar-box{
									width: 152upx;
									height: 152upx;
									background-image: linear-gradient(to bottom, #A09DB5, #867FB1);
									border-radius: 50%;
									display: flex;
									justify-content: center;
									align-items: center;
									.avatar-img{
										width: 142upx;
										height: 142upx;
										border-radius: 50%;
									}
								}
								.player-name{
									font-size: 38upx;
									font-weight: 600;
									color: $black-color;
									margin-bottom: 6upx;
								}
								.player-lv{
									background: #e2ecf9;
									height: 40upx;
									line-height: 40upx;
									padding: 0 16upx;
									border-radius: 20upx;
									text{
										@include font-style();
										font-size: 20upx;
									}
								}
							}
							
						}
						.podium-2{
							flex: 1;
							position: relative;
							top: 34upx;
							.podium-item{
								.avatar-box{
									background-image: linear-gradient(to bottom, #A09DB5, #867FB1);
								}
							}
						}
						.podium-1{
							flex: 1.5;
							position: relative;
							top: -10upx;
							.podium-item{
								.avatar-box{
									background-image: linear-gradient(to bottom, #FEC942, #FFB600);
								}
							}
						}
						.podium-3{
							flex: 1;
							position: relative;
							top: 34upx;
							.podium-item{
								.avatar-box{
									background-image: linear-gradient(to bottom, #E09F40, #FF9800);
								}
							}
						}
					}
					.podium-img{
						width: 100%;
						height: 170upx;
						vertical-align: middle;
					}
				}
			}
		}
		//领奖台改为整体的，
		.ranking-box{
			position: absolute;
			bottom: 0;
			left: 3vw;
			height: calc(100% - 470rpx - 66rpx - 108rpx - 110rpx);
			// height: calc(100% - 260px - 33px - 54px - 55px);
			width: 94vw;
			transition: height 0.3s ease;
			background: #fff;
			border-radius: 20upx 20upx 0 0;
			padding: 0 20upx;
			box-sizing: border-box;
			.markers-box{
				width: 100%;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				.markers{
					width: 80upx;
					height: 8upx;
				    background: $gray-color;
					border-radius: 4upx;		
				}
			}
			.top-8{
				position: relative;
				top: -14upx;
				font-size: 28upx;
				color: $gray-color;
				letter-spacing: 6upx;
			}
				
			.top-16{
				font-size: 28upx;
				color: $gray-color;
				letter-spacing: 6upx;
			}
			.ranking-list{
				display: flex;
				flex-direction: column;
				.ranking-item{
					margin: 20upx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left-info{
						display: flex;
						align-items: center;
						.index{
							color: $gray-color;
							font-size: 34upx;
						}
						.avatar{
							width: 70upx;
							height: 70upx;
							border-radius: 50%;
							margin: 0 20upx 0 30upx;
						}
						.player-name{
							font-size: 32upx;
							font-weight: 500;
							color: $black-color;
							margin-right: 40upx;
						}
						.player-lv{
							background: #e2ecf9;
							height: 40upx;
							line-height: 40upx;
							padding: 0 16upx;
							border-radius: 20upx;
							text{
								@include font-style();
								font-size: 22upx;
							}
						}
					}
					.right-handle{
						display: flex;
						align-items: center;
						.grips{
							background: #ffede8;
							height: 40upx;
							line-height: 40upx;
							padding: 0 16upx;
							border-radius: 20upx;
							margin-right: 20upx;
							text{
								color: #FF5219;
								font-size: 22upx;
							}
						}
						.like-btn-box{
							display: flex;
							align-items: center;
							position: relative;
							.like-btn{
								.like-img{
									width: 40upx;
									height: 40upx;
								}
							}
							text{
								margin-left: 10upx;
								color: $gray-color;
								font-size: 24upx;
								font-weight: 600;
							}
						}
					}
					
				}
			}
		}
		// .bike-detail-box{
		// 	background: rgba(0, 0, 0, 0.4);
		// 	width: 100%;
		// 	height: 100vh;
		// 	position: fixed;
		// 	bottom: 0;
		// 	left: 0;
		// 	z-index: 19;
		// 	.bike-detail {
		// 		position: absolute;
		// 		bottom: 0;
		// 		left: 0;
		// 		background: #f5f5f5;
		// 		width: calc(100% - 40upx);
		// 		padding: 20upx;
		// 		border-radius: 40upx 40upx 0 0;
		// 		.bike-title {
		// 			width: 100%;
		// 			display: flex;
		// 			justify-content: space-between;
		// 			align-items: center;
		// 			padding: 20upx 0;
		// 			.title-left{
		// 				width: 100%;
		// 				height: 70upx;
		// 				position: relative;
		// 				padding: 0 20upx;
		// 				font-size: 36upx;
		// 				.title-text{
		// 					position: absolute;
		// 					top: 0;
		// 					left: 16upx;
		// 					z-index: 2;
		// 					font-weight: 600;
		// 				}
		// 				.bg{
		// 					position: absolute;
		// 					top: 24upx;
		// 					left: 0;
		// 					z-index: 1;
		// 					width: 172upx;
		// 					height: 30upx;
		// 					background: #FFD9B5;
		// 					border-radius: 12upx;
		// 				}
		// 				.bg-2{
		// 					width: 204upx;
		// 				}
		// 				.bg-3{
		// 					width: 104upx;
		// 				}
		// 			}
		// 		}
		// 	}
		// 	.detailTransform{
		// 		animation:detailmove 0.2s ease 0s 1 normal;
		// 	}
		// 	@keyframes detailmove {
		// 		0% {bottom:-20vh;}
		// 		100% {bottom:0;}
		// 	}
		// }	
		
	}
</style>
